<!-- 
 @Author: LW  
 @Date: 2021-01-15 14:25:38  
 @function:eChart柱状图
  ---------------------------------------------------------- 
 -->
<template>
  <div id="statistic" class="statistic" style="width:310px;height:200px;">柱状图统计</div>
</template>
<script>
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: {},
      name: "",
      titles: [],
      values: []
    };
  },
  props: {
    echartObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    //观察option的变化
    echartObj: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          //  this.name=newVal.name;
          //   this.titles=newVal.titles;
          //    this.values=newVal.values;
          this.loadEchart();
        } else {
          this.init();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },
  created() {},
  mounted() {
    this.loadEchart();
  },
  methods: {
    loadEchart() {
      this.myChart = Echarts.init(document.getElementById("statistic"));
      var option = {
        tooltip: {},
        grid: {
          left: "2%",
          right: "2%",
          bottom: "1%",
          top: "8%",
          containLabel: true
        },
        xAxis: {
          data: this.echartObj.titles,
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            align: "right"
          },
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "##0082A8",
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "##0082A8",
              width: 1 //这里是为了突出显示加上的
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: false //隐藏或显示
          }
        },
        series: [
          {
            name: this.echartObj.name,
            type: "bar",
            //单个柱状图的宽度
            barCategoryGap: "60%",
            data: this.echartObj.values,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#00FFE9"
                  }
                },
                //柱状图的渐变色
                color: new Echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                  [
                    { offset: 0, color: "#69F5F1" },
                    { offset: 0.6, color: "#00529E" }
                  ]
                )
              }
            }
          }
        ]
      };
      this.myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.statistic {
  margin: 0 auto;
}
</style>